<html>
  <head>
    <style>
      html, body{
        width: 100%;
        height: 100%;
        overflow: hidden;
        margin: 0;
        padding: 0;
      }
      body {
        background: #1e2124;
        color: #6c757d;
        font-family: Arial, Helvetica, sans-serif;
      }
      .aligner-center-center{
        height: 100%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .aligner-content{
        position: relative;
        width: 100%;
        padding: 80px;
      }
      .icon {
        position: relative;
        font-size: 36px;
        line-height: 54px;
        margin-bottom: 10px;
        text-align: center;
      }
      .icon svg{
        position: relative;
        display: inline-block;
        width: 54px;
        height: 54px;
        top: 14px;
      }
      .icon .icon-text{
        color: #fff;
        text-align: center;
        display: inline;
      }
      svg{
        position: relative;
        width: 100%;
      }
      .loading{
        padding-top: 10px;
        position: relative;
      }
      .bar{
        position: relative;;
        height: 2px;
        background: #262b2f;
      }
      .progress{
        position: relative;
        height: 2px;
        background: #3d90ce;
        box-shadow: 0 0 20px #3d90ce;
        animation-name: loader-animation;
        animation-duration: 1.6s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out;
      }

    @keyframes loader-animation{
      0% {
        left: 0;
        width: 0px;
      }
      50% {
        left: 0;
        width: 100%;
      }
      100% {
        left: 100%;
        width: 0px;
      }
    }
    .glow-wrapper{
      position: relative;
      width: 100%;
      height: 2px;
      top: -2px;
    }

    .glow{
      height: 100%;
      display: flex;
      transform: translateZ(0);
    }

    .glow div{
      flex: 1;
      background: #3d90ce;
      animation: glow 0.8s infinite alternate ease;
      box-shadow: 0 0 20px #3d90ce;
    }

    .glow div.b1{ animation-delay: -0.72s; }
    .glow div.b2{ animation-delay: -0.64s; }
    .glow div.b3{ animation-delay: -0.56s; }
    .glow div.b4{ animation-delay: -0.48s; }
    .glow div.b5{ animation-delay: -0.40s; }
    .glow div.b6{ animation-delay: -0.32s; }
    .glow div.b7{ animation-delay: -0.24s; }
    .glow div.b8{ animation-delay: -0.16s; }
    .glow div.b9{ animation-delay: -0.08s; }


    @keyframes glow{
      100% {
        background: transparent;
        flex: 10;
        box-shadow: 0 0 0 transparent;
      }
    }

    .text{
      height: 20px;
      line-height: 20px;
      text-align: center;
      margin-top: 5px;
    }

    </style>
  </head>
  <body>
    <div class="aligner-center-center">
      <div class="aligner-content">
        <div class="icon">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#3f90ce"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M14.25 2.26l-.08-.04-.01.02C13.46 2.09 12.74 2 12 2 6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10c0-4.75-3.31-8.72-7.75-9.74zM19.41 9h-7.99l2.71-4.7c2.4.66 4.35 2.42 5.28 4.7zM13.1 4.08L10.27 9l-1.15 2L6.4 6.3C7.84 4.88 9.82 4 12 4c.37 0 .74.03 1.1.08zM5.7 7.09L8.54 12l1.15 2H4.26C4.1 13.36 4 12.69 4 12c0-1.85.64-3.55 1.7-4.91zM4.59 15h7.98l-2.71 4.7c-2.4-.67-4.34-2.42-5.27-4.7zm6.31 4.91L14.89 13l2.72 4.7C16.16 19.12 14.18 20 12 20c-.38 0-.74-.04-1.1-.09zm7.4-3l-4-6.91h5.43c.17.64.27 1.31.27 2 0 1.85-.64 3.55-1.7 4.91z"/></svg>
          <div class="icon-text">OpenLens</div>
        </div>
        <div class="loading">
          <div class="bar">
            <div class="progress"></div>
          </div>
          <div class="glow-wrapper">
            <div class="glow">
              <div class="b1"></div>
              <div class="b2"></div>
              <div class="b3"></div>
              <div class="b4"></div>
              <div class="b5"></div>
              <div class="b6"></div>
              <div class="b7"></div>
              <div class="b8"></div>
              <div class="b9"></div>
            </div>
          </div>
          <div class="text">
            Loading...
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
